<template>
	<view>
		<view class="accredit_model">
			<view class="model_container">
				<view class="model_top">
					<image class="model_icon" :src="urlDomain + 'crmebimage/presets/model_img.png'"></image>
				</view>
				<view class="model_content">
					<view class="model_title">提示</view>
					<view class="model_desc">{{ content }}</view>
					<view class="model_btns">
						<view class="mbtn cancel_btn" @click="modelCancel()">取消</view>
						<view class="mbtn confirm_btn" @click="modelConfirm()" v-if="locationType">确定</view>
						<button class="mbtn confirm_btn" v-if="userPhoneType" open-type="getPhoneNumber" @getphonenumber="getphonenumber">确定</button>
					</view>
				</view>
			</view>
		</view>
		<view class="mask"></view>
	</view>
</template>
<script>
const app = getApp();
import Routine from '@/libs/routine';
import { getUserPhone } from '@/api/public';
export default {
	name: '',
	props: {
		locationType: {
			type: Boolean,
			default: false
		},
		userPhoneType: {
			type: Boolean,
			default: false
		},
		authKey: {
			type: String,
			default: ''
		},
		isPhoneBox: {
			type: Boolean,
			default: false
		},
		content: {
			type: String,
			default: '申请获取用于完整服务'
		}
	},
	data() {
		return {
			urlDomain: this.$Cache.get('imgHost'),
			isStatus: false
		};
	},
	methods: {
		modelCancel() {
			this.$emit('closeModel', { isStatus: this.isStatus });
		},
		modelConfirm() {
			this.$emit('confirmModel');
		},
		// #ifdef MP
		// 小程序获取手机号码
		getphonenumber(e) {
			uni.showLoading({ title: '加载中' });
			Routine.getCode()
				.then((code) => {
					this.getUserPhoneNumber(e.detail.encryptedData, e.detail.iv, code);
				})
				.catch((error) => {
					this.modelCancel();
					uni.hideLoading();
				});
		},
		// 小程序获取手机号码回调
		getUserPhoneNumber(encryptedData, iv, code) {
			getUserPhone({
				encryptedData: encryptedData,
				iv: iv,
				code: code,
				key: this.authKey,
				type: 'routine'
			})
				.then((res) => {
					this.$store.commit('LOGIN', {
						token: res.data.token
					});
					this.$store.commit('SETUID', res.data.id);
					this.$store.commit('SetMerchantEmployeeList', {
						merchantEmployeeList: res.data.merchantEmployeeList
					});
					this.getUserInfo();
				})
				.catch((res) => {
					uni.hideLoading();
					this.$util.Tips({
						title: res
					});
				});
		},
		/**
		 * 获取个人用户信息
		 */
		getUserInfo() {
			this.$store.dispatch('USERINFO').then((res) => {
				uni.hideLoading();
				this.isStatus = true;
				this.modelCancel();
			});
		}
		// #endif
	}
};
</script>

<style scoped lang="scss">
.accredit_model {
	/* position: relative; */
	width: 560rpx;
	height: 660rpx;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 999;
}
.model_container {
	width: 100%;
	height: 660rpx;
}
.model_top {
	width: 100%;
	height: 270rpx;
	// background: #D64532;
	@include main_bg_color(theme);
	border-radius: 20rpx 20rpx 0 0;
	background-image: url();
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}
.model_icon {
	width: 230rpx;
	height: 210rpx;
}
.model_content {
	width: 100%;
	height: 390rpx;
	background-color: #fff;
	border-radius: 0 0 20rpx 20rpx;
	padding: 32rpx;
	box-sizing: border-box;
}
.model_title {
	text-align: center;
	font-size: 36rpx;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #333333;
	line-height: 50rpx;
}
.model_desc {
	width: 448rpx;
	height: 96rpx;
	margin: 20rpx auto 0;
	font-size: 32rpx;
	text-align: center;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #666666;
	line-height: 48rpx;
}
.model_btns {
	width: 448rpx;
	height: 82rpx;
	margin: auto;
	display: flex;
	justify-content: space-between;
}
.mbtn {
	width: 208rpx;
	height: 82rpx;
	border-radius: 42rpx;
	margin-top: 44rpx;
}
.cancel_btn {
	background: #f5f5f5;
	font-weight: 400;
	color: #666666;
	line-height: 82rpx;
	text-align: center;
	font-size: 32rpx;
}
.confirm_btn {
	@include linear-gradient(theme);
	font-weight: 400;
	color: #fff;
	line-height: 82rpx;
	text-align: center;
	font-size: 32rpx;
}
.mask {
	z-index: 900;
}
</style>
